<template>
	<view>
		<!-- 主体 -->
		<view class="page page-bottom-bar form-edit">
			<view class="edit-box">
				<view class="item">
					<view class="label">姓名</view>
					<input :value="form.name" maxlength="10" placeholder="输入收货人姓名" @input="Onname" placeholder-class="placeholderClass" />
				</view>
				<view class="item">
					<view class="label">电话</view>
					<input :value="form.mobile" maxlength="11" @input="Onmobile" placeholder="请输入联系电话" type="number" placeholder-class="placeholderClass" />
				</view>
				<view class="item">
					<view class="label">地址</view>
					<view class="city-box flex-row-start" @click="openCity">
						<view class="city-item w100 font15" v-if="form.province ==''">
							<text class="t1">选择</text>
							<text class="t2">省</text>
							<text class="t1">选择</text>
							<text class="t2">市</text>
							<text class="t1">选择</text>
							<text class="t2">区</text>
						</view>
						<view v-else class="t3 h100 font15 flex-row-start">{{form.province}}{{form.city}}{{form.area}}</view>
					</view>
					<uni-icons type="arrowright" size="12" :color="themeColor"></uni-icons>
				</view>
				<textarea class="edit_textarea" :value="form.address" @input="Oninfo" placeholder-class="placeholderClass" placeholder="请输入详细地址" />
			</view>
		</view>
		<!-- 按钮 -->
		<view class="fix-bottom-btn flex-row-center">
			<view class="btn flex-row-center font-ffffff font15" @click="submit">保存</view>
		</view>
		<!-- 选择地址弹窗 -->
		<Comcity ref="Comcity" @Onaddress="Onaddress"></Comcity>
	</view>
</template>

<script>
	import Comcity from '@/components/j-Comcity/index.vue'
	export default {
		components: { Comcity },
		data() {
			return {
				themeColor: '#03004c',
				id: null, // 地址ID
				form: {
					name: '',
					mobile: '',
					address: '',
					province:'',
					city:'',
					area:'',
					areaCode: '420102'
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				// 详情
				this.$Http({
					url: 'addressInfo',
					token: true,
					data: { id: this.id },
				}).then(res => {
					if (res.code == 1) {
						this.form.name = res.data.name
						this.form.mobile = res.data.mobile
						this.form.address = res.data.address
						this.form.province = res.data.province
						this.form.city = res.data.city
						this.form.area = res.data.area
						this.form.areaCode = res.data.areaCode
					}
				});
			}
		},
		methods: {
			Onname(e) {
				this.form.name = e.detail.value
			},
			Onmobile(e) {
				this.form.mobile = e.detail.value
			},
			Oninfo(e) {
				this.form.address = e.detail.value
			},
			// 打开地址
			openCity() {
				this.$refs.Comcity.Onopen(this.form.areaCode ? this.form.areaCode : '')
			},
			// 确认地址
			Onaddress(e) {
				this.form.province = e.province.title
				this.form.city = e.city.title
				this.form.area = e.county.title
				this.form.areaCode = e.county.code
			},
			// 提交
			submit() {
				if (this.form.name == '') {
					wx.showToast({ title: '请输入您的姓名', icon: 'none', duration: 2000 })
					return
				}
				if (!this.$base.checkMobile(this.form.mobile)) {
					wx.showToast({ title: '请输入正确的手机号码', icon: 'none', duration: 2000 })
					return
				}
				if (this.form.areaCode == '') {
					wx.showToast({ title: '请选择省市区', icon: 'none', duration: 2000 })
					return
				}
				if (this.form.address == '') {
					wx.showToast({ title: '请输入详情地址', icon: 'none', duration: 2000 })
					return
				}
				if (this.id) {
					this.form.id = this.id
				}
				this.$Http({
					url: 'setAddress',
					data: this.form,
					token: true,
					type: 'POST'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({ title: '操作成功' })
						setTimeout(()=>{
							uni.navigateBack({ delta: 1 });
						}, 2000)
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
				});
			}
		}
	}
</script>

<style lang="less">
	@import url("form.less");
</style>
